<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //虚拟Dom
        const vnode = {
                tag: "div",
                props: {
                    onClick: () => {
                        alert("hello")
                    }
                },
                children: "click"
            }
            //渲染器
        function renderer(vnode, container) {
            const el = document.createElement(vnode.tag);
            for (const key in vnode.props) {
                if (/^on/.test(key)) {
                    el.addEventListener(
                        key.substr(2).toLowerCase(),
                        vnode.props[key]
                    )
                }
            }
            //处理children
            if (typeof vnode.children === "string") {
                el.appendChild(document.createTextNode(vnode.children))
            } else if (Array.isArray(vnode.children)) {
                vnode.children.forEach(element => renderer(child, el));
            }
            container.appendChild(el)
        }
        renderer(vnode, document.body)
    </script>
</body>

</html>